<template>
  <view class="container">
    <Card class="account-card">
      <view class="account-header">
        <view class="avatar">
          <image v-if="account.avatar" :src="account.avatar" class="avatar-img" />
          <view v-else class="avatar-placeholder">头像</view>
        </view>
        <view class="account-info">
          <text class="account-name">{{ account.name }}</text>
          <text class="account-grade">{{ account.grade }}</text>
        </view>
        <view class="account-status" :class="account.statusClass">
          {{ account.status }}
        </view>
      </view>
      
      <view class="account-details">
        <view class="detail-item">
          <text class="label">性别：</text>
          <text class="value">{{ account.gender }}</text>
        </view>
        
        <view class="detail-item">
          <text class="label">出生日期：</text>
          <text class="value">{{ account.birthDate }}</text>
        </view>
        
        <view class="detail-item">
          <text class="label">关联时间：</text>
          <text class="value">{{ account.linkTime }}</text>
        </view>
        
        <view class="detail-item">
          <text class="label">备注：</text>
          <text class="value">{{ account.remark }}</text>
        </view>
      </view>
    </Card>
    
    <Card class="goals-card">
      <view class="card-header">
        <text class="card-title">相关目标</text>
      </view>
      
      <view class="goals-list">
        <view 
          v-for="(goal, index) in account.goals" 
          :key="index" 
          class="goal-item"
          @click="goToGoalDetail(goal)"
        >
          <text class="goal-title">{{ goal.title }}</text>
          <view class="goal-status" :class="goal.statusClass">
            {{ goal.status }}
          </view>
        </view>
      </view>
    </Card>
    
    <view class="action-buttons">
      <Button class="action-btn" type="primary" text="编辑账户" @click="goToEdit" />
      <Button class="action-btn" type="error" text="解除关联" @click="unlinkAccount" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      account: {
        id: '1',
        name: '张小明',
        grade: '小学五年级',
        avatar: '',
        gender: '男',
        birthDate: '2015-03-15',
        linkTime: '2025-08-20',
        remark: '学习积极性较高，但注意力容易分散',
        status: '正常',
        statusClass: 'status-active',
        goals: [
          {
            id: '1',
            title: '提高数学成绩',
            status: '进行中',
            statusClass: 'status-progress'
          },
          {
            id: '2',
            title: '改正写字潦草',
            status: '已完成',
            statusClass: 'status-completed'
          }
        ]
      }
    };
  },
  
  methods: {
    goToEdit() {
      uni.showToast({
        title: '编辑功能待实现',
        icon: 'none'
      });
    },
    
    unlinkAccount() {
      uni.showModal({
        title: '确认解除关联',
        content: '确定要解除与此学生的关联吗？此操作不可恢复。',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '已解除关联',
              icon: 'success'
            });
            
            // 返回关联账户列表
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        }
      });
    },
    
    goToGoalDetail(goal) {
      uni.navigateTo({
        url: '/pages/goal/learning-detail?id=' + goal.id
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.account-card {
  margin-bottom: $spacing-base;
}

.account-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: $spacing-lg;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: $spacing-base;
  overflow: hidden;
  background-color: $primary-color;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.avatar-placeholder {
  color: #fff;
  font-size: $font-size-sm;
}

.account-info {
  flex: 1;
}

.account-name {
  font-size: $font-size-lg;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-xs;
}

.account-grade {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.account-status {
  font-size: $font-size-sm;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
}

.status-active {
  background-color: rgba($secondary-color, 0.1);
  color: $secondary-color;
}

.account-details {
  font-size: $font-size-base;
}

.detail-item {
  display: flex;
  flex-direction: row;
  margin-bottom: $spacing-sm;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  color: $text-secondary;
  width: 160rpx;
}

.value {
  flex: 1;
  color: $text-primary;
}

.goals-card {
  margin-bottom: 120rpx;
}

.card-header {
  margin-bottom: $spacing-base;
}

.card-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
}

.goals-list {
  margin-top: $spacing-sm;
}

.goal-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-base 0;
  border-bottom: 1rpx solid $text-tertiary;
  
  &:last-child {
    border-bottom: none;
  }
}

.goal-title {
  font-size: $font-size-base;
  color: $text-primary;
  flex: 1;
}

.goal-status {
  font-size: $font-size-sm;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
}

.status-progress {
  background-color: rgba($primary-color, 0.1);
  color: $primary-color;
}

.status-completed {
  background-color: rgba($secondary-color, 0.1);
  color: $secondary-color;
}

.action-buttons {
  position: fixed;
  bottom: 40rpx;
  left: $spacing-base;
  right: $spacing-base;
  display: flex;
  flex-direction: row;
}

.action-btn {
  flex: 1;
  
  &:first-child {
    margin-right: $spacing-base;
  }
}
</style>